<div>
    <div class="transport-select bar corner-all">
        <span class="text">Быстрый переход</span>        
        <ul class="transport-select-content">    
            <?php $counter = 0; $batchSize = 4;?>
            <?php foreach ($this->categories as $category):?>
				<li class="right-delimiter"><a class="icons-transport-grey icon-cars-grey" href="catalog/category?category=<?= $category->getId();?>"><?= $category->getName();?></a></li>
				<?php if($counter < $batchSize){
				    ++$counter;
				} else {
				    $counter = 0;
				    break;
				}?>
			<?php endforeach;?>
        </ul>
        <!--add class "opened" if you want open list -->
        <div class="switch-box select-more-box">
        	        <div class="current-position">
                        <a href="#switch" class="corner-top arrow-small arrow-black-down"></a>
                    </div>
        		    <div class="select-more-content switch-box-content corner-bottom corner-tl">
                                <ul class="transport-list">
                                    <?php $i=0;  foreach ($this->categories as $category):?>
                                           <?php if($i>4): ?>
                                                <li><a href="catalog/category?category=<?= $category->getId();?>" class="icons-transport-grey icon-cars-grey"><?= $category->getName();?></a></li>
                                           <?php else: ?>
                                                <?php $i++?>
                                           <?php endif; ?>
                                    <?php endforeach;?>
                                </ul>
        		    </div>
        </div>
    </div><!--.transport-select bar corner-all-->
    <div class="depression"></div>
</div>



<?php /*
<div>
    <div class="transport-select bar corner-all">
        <ul>    
            <li class="first">Быстрый переход</li>
            <?php foreach ($this->categories as $category):?>
				<li class="right-delimiter"><a class="icons-transport-grey icon-cars-grey" href="search/search?category=1">Легковые</a></li>
			<?php endforeach;?>
			<li class="right-delimiter"><a class="icons-transport-grey icon-big-cars-grey" href="search/search?category=6">Грузовые</a></li>
			<li class="right-delimiter"><a class="icons-transport-grey icon-moto-grey" href="search/search?category=2">Мотоциклы</a></li>
			<li class="right-delimiter"><a class="icons-transport-grey icon-sprecial-grey" href="search/search?category=4">Техника</a></li>	
		    <li><a class="icons-transport-grey icon-water-grey" href="search/search?category=3">Водные</a></li>	
        </ul>
    </div><!--.transport-select bar corner-all-->
    <div class="depression"></div>
</div>
*/ ?>
<!--<div>
    <div class="transport-select bar corner-all">
        <div style="line-height: 2.083em; padding:5px 0;">
        <span class="text">Быстрый переход</span>
        <ul>    
			<li class="right-delimiter"><a class="icons-transport-grey icon-cars-grey" href="search/search?category=1">Легковые</a></li>
			<li class="right-delimiter"><a class="icons-transport-grey icon-big-cars-grey" href="search/search?category=6">Грузовые</a></li>
			<li class="right-delimiter"><a class="icons-transport-grey icon-moto-grey" href="search/search?category=2">Мотоциклы</a></li>
			<li class="right-delimiter"><a class="icons-transport-grey icon-sprecial-grey" href="search/search?category=4">Техника</a></li>	
		    <li><a class="icons-transport-grey icon-water-grey" href="search/search?category=3">Водные</a></li>	
        </ul>
        <a class="arrow-small arrow-black-down" href="#"></a>
        </div>
        <div class="corner-all" style="background:#fff; border:1px solid #b2b2b2;">
            <div style="line-height: 2.083em; padding:5px 0;">
            <ul>    
    			<li class="right-delimiter"><a class="icons-transport-grey icon-cars-grey" href="search/search?category=1">Легковые</a></li>
    			<li class="right-delimiter"><a class="icons-transport-grey icon-big-cars-grey" href="search/search?category=6">Грузовые</a></li>
    			<li class="right-delimiter"><a class="icons-transport-grey icon-moto-grey" href="search/search?category=2">Мотоциклы</a></li>
    			<li class="right-delimiter"><a class="icons-transport-grey icon-sprecial-grey" href="search/search?category=4">Техника</a></li>	
    		    <li><a class="icons-transport-grey icon-water-grey" href="search/search?category=3">Водные</a></li>	
            </ul>
            <a class="arrow-small arrow-black-up" href="#"></a>
            </div>
            <div style="line-height: 2.083em; padding:5px 0;">
                <ul>    
        			<li class="right-delimiter"><a class="icons-transport-grey icon-cars-grey" href="search/search?category=1">Легковые</a></li>
        			<li class="right-delimiter"><a class="icons-transport-grey icon-big-cars-grey" href="search/search?category=6">Грузовые</a></li>
        			<li class="right-delimiter"><a class="icons-transport-grey icon-moto-grey" href="search/search?category=2">Мотоциклы</a></li>
        			<li class="right-delimiter"><a class="icons-transport-grey icon-sprecial-grey" href="search/search?category=4">Техника</a></li>	
        		    <li><a class="icons-transport-grey icon-water-grey" href="search/search?category=3">Водные</a></li>	
                </ul>
                <a class="arrow-small arrow-black-up" href="#"></a>
            </div>
        </div>
    </div>
    <div class="depression"></div>
</div>
-->